<template>
  <div class="center-home-main">
    <div class="earth-bg">
      <div class="bg-rotate">
        <div class="earth-round"></div>
      </div>
      <div class="bg-arrow">
        <div class="earth-arrow"></div>
      </div>
    </div>
    <!-- <div class="chart">
      <CMap />
    </div> -->
  </div>
</template>

<script setup lang="ts">
// import CMap from './components/CMap.vue'

defineOptions({
  name: 'CenterHome'
})
</script>

<style scoped>
/* 顺势360无限旋转 */
@keyframes rotateImage {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

/* 逆势360无限旋转 */
@keyframes rotateLbx {
  from {
    transform: rotate(359deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.center-home-main {
  height: 100%;
  position: relative;

  .earth-bg {
    width: 5.18rem;
    height: 5.18rem;
    background: url('@/assets/kanban/home/map.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);

    .bg-rotate {
      position: absolute;
      height: 6.43rem;
      width: 6.43rem;
      left: 50%;
      top: -10%;
      transform: translateX(-50%);
      z-index: 2;

      .earth-round {
        /*
            turn : 定义的动画名称
            1s : 动画时间
            linear : 动画以何种运行轨迹完成一个周期
            infinite :规定动画应该无限次播放
        */
        animation: rotateImage 10s linear infinite;
        width: 100%;
        height: 100%;
        background: url('@/assets/kanban/home/lbx.png') no-repeat;
        background-size: 100% 100%;
      }
    }

    .bg-arrow {
      width: 5.56rem;
      height: 5.56rem;
      position: absolute;
      left: 50%;
      top: -4%;
      transform: translateX(-50%);
      z-index: 3;

      .earth-arrow {
        animation: rotateLbx 10s linear infinite;
        width: 100%;
        height: 100%;
        background: url('@/assets/kanban/home/jt.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .chart {
    height: 100%;
  }
}
</style>
